<template>
	<div id="logininputs">
		<van-row class="loginchange">
			<van-col :span="12" @click="lastlogin">快捷登录</van-col>
			<van-col :span="12" @click="numberlogin">账号登录</van-col>
		</van-row>
		
		<!-- 快捷登录 -->
		<lastlogin v-if="islogin"></lastlogin>
		
		
		<!-- 账号登录 -->
		<numberlogin v-else></numberlogin>
	</div>
</template>

<script>
	import lastlogin from '@/components/login/lastlogin.vue'
	import numberlogin from '@/components/login/numberlogin.vue'
	export default
	{
		data()
		{
			return{
				islogin:true
			}
		},
		components:
		{
			lastlogin,
			numberlogin
		},
		methods:
		{
			lastlogin()
			{
				this.islogin=true
			},
			numberlogin()
			{
				this.islogin=false
			}
		}
	}
</script>

<style>
	#logininputs{
		width: 100%;
		height: 100%;
	}
	.loginchange{
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 1.5625rem;
		font-weight: bold;
	}
	.phonelogininput{
		width: 70%;
		height: 50px;
		margin-top: 30px;
		border: none;
		border-bottom: solid 2px #ccc;
	}
	.codelogininput{
		width: 76%;
		height: 50px;
		margin-top: 30px;
		border: none;
		border-bottom: solid 2px #ccc;
		margin-right: 2%;
		float: right;
	}
	.getcode{
		width: 55%;
		height: 50px;
		margin-top: 30px;
		float: left;
		background-color: white;
		border: none;
		border-radius: 5px;
		border: solid 1px black;
	}
	.logininputbutton{
		width: 70%;
		height: 60px;
		margin-top: 30px;
		border: none;
		border-radius: 5px;
		background-color: #1E1E1E;
		color: white;
	}
</style>
